<template>
  <div>
    <el-card style="width: 80%;margin: 0 auto;height: 100%;">
      <template #header>
        <div class="head">新增線下訂單</div>
        <el-button @click="selectProduct">新增商品</el-button>
      </template>
      <template>
        <el-form ref="form" :model="orderParam" label-width="80px">
          <el-col :span="12">
            <el-form-item label="下單人姓名">
              <el-input v-model="orderParam.name" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下單人號碼">
              <el-input v-model="orderParam.name" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下單人姓名">
              <el-input v-model="orderParam.name" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下單人姓名">
              <el-input v-model="orderParam.name" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下單人姓名">
              <el-input v-model="orderParam.name" />
            </el-form-item>
          </el-col>
        </el-form>

      </template>
    </el-card>
    <product ref="pro" />
  </div>
</template>

<script>
const defaultOrderMessage = {
  createTime: '',
  freightAmount: '',
  receiverName: '',
  receiverPhone: '',
  receiverRegion: '',
  receiverStreet: ''
}
import product from '@/components/product'

export default {
  name: 'AddOrder',
  components: { product },
  data() {
    return {
      dialogVisible: false,
      orderParam: Object.assign({}, defaultOrderMessage)
    }
  },
  methods: {
    selectProduct() {
      this.dialogVisible = true
      console.log(this.$refs.pro)
      this.$refs.pro.open()
    }
  }
}
</script>

<style scoped>
.head {
  font-weight: bolder;
  font-size: 34px;
}

.orderInput {
  width: 220px;
}
</style>
